<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>基础用法</span>
          </div>
          <el-row>
            <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>禁用状态</span>
          </div>
          <el-row>
            <el-input-number v-model="num2" :disabled="true"></el-input-number>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>步数</span>
          </div>
          <el-row>
            <el-input-number v-model="num3" :step="2"></el-input-number>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>严格步数</span>
          </div>
          <el-row>
            <el-input-number v-model="num4" :step="2" step-strictly></el-input-number>
          </el-row>

        </el-card>
      </el-col>

      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>精度</span>
          </div>
          <el-row>
            <el-input-number v-model="num5" :precision="2" :step="0.1" :max="10"></el-input-number>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>按钮位置</span>
          </div>
          <el-row>
            <el-input-number v-model="num6" controls-position="right" @change="handleChange1" :min="1" :max="10"></el-input-number>
          </el-row>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'counter',
  data() {
    return {
      num1: 1,
      num3: 1,
      num2: 1,
      num4: 1,
      num5: 1,
      num6: 1,
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    handleChange1(value) {
      console.log(value);
    }
  }
}
</script>

<style scoped lang="scss">
.clearfix {
  font-size: 14px;
}

.el-col {
  margin-bottom: 20px;
}
</style>
